<template>
    <div>
        <div>
             <el-form :inline="true"  class="demo-form-inline">
          <el-form-item label="影院名称">
            <el-input v-model="queryCinemaName" placeholder="请输入影院名称"></el-input>
          </el-form-item>
          <el-form-item label="影院名称">
            <el-input v-model="qeuryCinemaArea" placeholder="请输入影院区域"></el-input>
          </el-form-item>
          
          <el-form-item>
            <el-button type="primary" @click="queryCinmea()">查询</el-button>
          </el-form-item>
        </el-form>
        <el-button type="text" @click="dialogFormVisible = true">添加电影</el-button>
        </div>

<!-- 表格回显数据 -->
<div>
    <el-table
        :data="cinemaList"
        style="width: 100%">
       
        <el-table-column
        label="影院名称"
        width="140"
        prop="cname">
        </el-table-column>

        <el-table-column
        label="电话"
        width="140"
        prop="tel">
        </el-table-column>

        <el-table-column
        label="图片"
        width="140"
        >
        <template slot-scope="scope">
                  <el-image
                    style="width: 100px; height: 100px"
                    :src="scope.row.img">
                    </el-image>
       </template>
        </el-table-column>

        <el-table-column
        label="区域"
        width="140"
        prop="area">
        </el-table-column>

        <el-table-column
        label="详细地址"
        width="140"
        prop="location">
        </el-table-column>

        <el-table-column
        label="经度"
        width="140"
        prop="lng">
        </el-table-column>

        <el-table-column
        label="纬度"
        width="140"
        prop="lat">
        </el-table-column>

        <el-table-column label="操作">
        <template slot-scope="scope">
            <el-button
            size="mini"
            @click="handleEdit(scope.row.id)">编辑</el-button>
            <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.row.id)">删除</el-button>
        </template>
        </el-table-column>
    </el-table>

    <!-- 分页 -->
        <el-pagination
            background
            style="text-align:center"
            layout="prev, pager, next"
            :total="pageInfo.total"
            :page-size="pageInfo.pageSize"
            @prev-click="queryCinmea"
            @next-click="queryCinmea"
            @current-change="queryCinmea">
          </el-pagination>


        <!-- 添加影院 -->
          <el-dialog title="添加影院" :visible.sync="dialogFormVisible">
          <el-form ref="form" :model="addCinema" label-width="80px">
            <el-form-item label="影院名称">
              <el-input v-model="addCinema.cname"></el-input>
            </el-form-item>
            <el-form-item label="电话">
              <el-input v-model="addCinema.tel"></el-input>
            </el-form-item>
            <el-form-item label="区域">
              <el-input v-model="addCinema.area"></el-input>
            </el-form-item>
             <el-form-item label="图片">
              <el-input v-model="addCinema.img"></el-input>
            </el-form-item>
            

            <!-- <el-form-item label="头像上传">
              <el-upload
                class="avatar-uploader"
                action="http://localhost:9001/admin/addCinema/upload"
                name="headerImg"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload">
                <img v-if="imageUrl" :src="imageUrl" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item> -->

            <el-form-item label="详细地址">
              <el-input type="textarea" v-model="addCinema.location"></el-input>
            </el-form-item>
             <el-form-item label="经度">
              <el-input v-model="addCinema.lng"></el-input>
            </el-form-item>
             <el-form-item label="纬度">
              <el-input v-model="addCinema.lat"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="save">保存</el-button>
              <el-button >取消</el-button>
            </el-form-item>
          </el-form>
        </el-dialog>

    <!-- 修改影院信息 -->
        <div>
        <el-dialog title="修改员工" :visible.sync="dialogUpdateVisible">
          <el-form ref="form" :model="cinemaShow" label-width="80px">
            <el-form-item label="影院名称">
              <el-input v-model="cinemaShow.cname"></el-input>
            </el-form-item>
            <el-form-item label="电话">
              <el-input v-model="cinemaShow.tel"></el-input>
            </el-form-item>
            <el-form-item label="区域">
              <el-input v-model="cinemaShow.area"></el-input>
            </el-form-item>
             <el-form-item label="图片">
              <el-input v-model="cinemaShow.img"></el-input>
            </el-form-item>
            

            <!-- <el-form-item label="头像上传">
              <el-upload
                class="avatar-uploader"
                action="http://localhost:9001/admin/addCinema/upload"
                name="headerImg"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload">
                <img v-if="imageUrl" :src="imageUrl" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item> -->

            <el-form-item label="详细地址">
              <el-input type="textarea" v-model="cinemaShow.location"></el-input>
            </el-form-item>
             <el-form-item label="经度">
              <el-input v-model="cinemaShow.lng"></el-input>
            </el-form-item>
             <el-form-item label="纬度">
              <el-input v-model="cinemaShow.lat"></el-input>
            </el-form-item>

           

            <el-form-item>
              <el-button type="primary" @click="onSubmit">保存</el-button>
              <el-button @click="dialogUpdateVisible=false">取消</el-button>
            </el-form-item>
          </el-form>
        </el-dialog>
      </div>
  </div>
</div>
</template>

<script>
export default {
name: "moban",
    data(){
      return{
          cinemaList:[],
          pageInfo:[],
          dialogFormVisible:false,
          queryCinemaName: '',
          qeuryCinemaArea: '',
          addCinema:{
              id:'',
                cname:'',
                tel:'',
                area:'',
                location:'',
                img:'',
                lng:'',
                lat:''
          },
          cinemaShow:{
                id:'',
                cname:'',
                tel:'',
                area:'',
                location:'',
                img:'',
                lng:'',
                lat:''
          },
          dialogUpdateVisible:false,
          
      }
    },
    methods:{
        // 查询影院信息分页
        queryCinmea(page){
            this.$axios.get("http://localhost:8080/admin/cinema/list",{
                params:{
                    now:page,
                    cname:this.queryCinemaName,
                    area:this.qeuryCinemaArea,
                }
            })
              .then(data=>{
                    this.cinemaList=data.data.data.list;
                    this.pageInfo=data.data.data;                            
                        })
        },
        // 添加影院信息
        save(){
            this.$axios.put("http://localhost:8080/admin/cinema/addCinema",{
              
                "addCinema":this.addCinema,
             
            }).then(data=>{
                if(data.data.code=200){
                  alert("添加成功");
                this.queryCinmea(1);
                this.dialogFormVisible=false;
                }else{
                  alert("添加失败")
                }
            })
        },

        // 根据id查询id查询当前用户的信息
        handleEdit(id) {       
          this.dialogUpdateVisible = true ;
          this.$axios.get("http://localhost:8080/admin/cinema/cinemaById",{
              params:{
                  id:id,
              }
          })
             .then(data=>{
              this.cinemaShow=data.data.data;
                        })
        },

        // 修改后影院信息保存
        onSubmit(){
            this.$axios.put("http://localhost:8080/admin/cinema/updateCinema",{
                    "cinemaShow":this.cinemaShow,
            })
            .then(data=>{
                if(data.data.code==200){
                    alert("修改成功");
                    this.queryCinmea();
                    this.dialogUpdateVisible=false;
            
                }
            })    
        },
        // 根据id删除影院信息
        handleDelete(id){
            console.log(id)
             this.$axios.delete("http://localhost:8080/admin/cinema/deleteCinema",{
                 params:{
                     id:id,
                 }
             })
                .then(data=>{
                    if(data.data.code==200){
                        alert("删除成功");
                        this.queryCinmea();
                    }else{
                        alert("删除失败")
                    }
             }) 
        }
    },
    mounted:function(){
        this.queryCinmea();

    }
}
</script>

<style scoped>

</style>
